<template>
    <!-- 新冠疫苗表单 -->
    <view class="xinguan_form">
        <view class="form_item">
            <view class="form_label">姓名</view>
            <input type="text" class="form_input" v-model="submitData.padding.name" placeholder="请输入姓名">
        </view>

        <view class="form_item">
            <view class="form_label">身份证</view>
            <input type="idcard" class="form_input" v-model="submitData.padding.id_card" placeholder="请输入身份证">
        </view>

        <view class="form_item">
            <view class="form_label">手机号</view>
            <input type="text" class="form_input" v-model="submitData.padding.phone" placeholder="请输入手机号">
        </view>

        <view class="form_item">
            <view class="form_label">现居地址</view>
            <picker mode="region" class="address_picker" @change="getAddress">
                <view class="address">
                    <view class="address_info">{{ submitData.padding.address.length > 0 ? submitData.padding.address :
                        '请选择现地址' }}</view>
                    <image src="/static/other/gengduo.svg" mode="" />
                </view>
            </picker>
        </view>

        <view class="form_item">
            <view class="form_label">现居详细地址</view>
            <input type="text" class="form_input" v-model="submitData.padding.de_address" placeholder="请输入现居详细地址">
        </view>

        <view class="form_item">
            <view class="form_label">疫苗人群分类</view>
            <picker mode="selector" :range="yimiaoPeopleArr" class="address_picker" @change="getSelectPeople">
                <view class="address">
                    <view class="address_info">{{ submitData.padding.crowd_sort.length > 0 ? submitData.padding.crowd_sort :
                        '请选择疫苗人群分类' }}</view>
                    <image src="/static/other/gengduo.svg" mode="" />
                </view>
            </picker>
        </view>
    </view>

    <!-- 医院地址信息 -->
    <view class="hospital_info card mt16 ml16 mr16">
        <view class="hospital_address1">{{ hospital_Info.obj.Hospital }}</view>
        <view class="hospital_address_detail">{{ hospital_Info.obj.address }}</view>
        <view class="yimiao_company">
            <text class="ml16" v-for="(item, index) in hospital_Info.obj.company" :key="index">{{ item }}</text>

        </view>
    </view>

    <!-- 日期 -->
    <view class="hospital_date card mt16 ml16 mr16">
        <view class="hospital_date_item" :class="{ active: currentDateIndex === index }"
            @click="selectDate(index, item.date)" v-for="(item, index) in hospital_Info.obj.week" :key="index">
            <view class="week_x">{{ item.day }}</view>
            <view class="week_date">{{ item.date }}</view>
            <view class="week_have">{{ item.Have }}</view>
        </view>


    </view>
    <!-- 预约时段 -->
    <view class="yuyue_shiduan_box mt16 ml16 mr16">
        <view class="yuyue_shiduan_item card mt16" v-for="(item, index) in hospital_Info.obj.lasting" :key="index">
            <view class="yuyue_shiduan_name">{{ item.period }}</view>
            <view class="yuyue_shiduan_time">
                <view class="yuyue_shiduan_time_item" :class="{ active: currentTimeIndex === `${index}-${index2}` }" @click="selectTime({
                    key: `${index}-${index2}`,
                    period: item.period,
                    reserve_time: `${item2.start_time}-${item2.end_time}`,
                    when: item2.when
                })" v-for="(item2, index2) in item.time" :key="index2">
                    <view>{{ item2.start_time }}--{{ item2.end_time }}</view>
                    <view>剩余{{ item2.over }}</view>
                </view>
            </view>
        </view>
    </view>


    <view style="height:200rpx;"></view>
    <!-- footer -->
    <view class="ft">
        <view class="cancel">取消</view>
        <view class="submit" @click="submitBtn">提交预约</view>
    </view>
</template>

<script setup lang="ts">
import { getXinGuanInfoApi, submitXinGuanYuYueApi } from '@/http/api'
import { onMounted, reactive, ref } from 'vue'
import type { IhospitalInfo, selectTimeType } from '@/dataType/data'

onMounted(() => {
    getXinGuanInfo()
})

const hospital_Info = reactive<{ obj: IhospitalInfo }>({
    obj: {
        Hospital: '',
        address: '',
        company: [],
        lasting: [],
        week: []
    }
});
const getXinGuanInfo = async () => {
    const res = await getXinGuanInfoApi()
    console.log('新冠：', res)
    hospital_Info.obj = res.data.data[0]
}

//疫苗人群分类
const yimiaoPeopleArr = ref(['医疗卫生人员', '卫生系统内工作的其他人员', '因公出国人员', '对外劳务派遣人员', '留学生', '因私出国人员', '海关边检人员', '公安系统,消防人员', '党政机关,事业单位人员', '社区工作者', '教育工作者', '小学和中学学生', '其他人员'])

//用于提交的表单对象
const submitData = reactive({
    padding: {
        name: '',
        id_card: '',
        phone: '',
        address: '',
        de_address: '',
        crowd_sort: '',
        date: '',
        period: '',
        reserve_time: '',
        when: -1
    }
})

//获取选择的地址
const getAddress = (e: any) => {
    console.log('e::', e.detail.value.join(','))
    submitData.padding.address = e.detail.value.join(',')
}

//获取疫苗选择人群分类
const getSelectPeople = (e: any) => {
    console.log('获取疫苗选择人群分类:', e)
    const i = e.detail.value;
    submitData.padding.crowd_sort = yimiaoPeopleArr.value[i]
}

//选择日期下标
const currentDateIndex = ref(-1)
//选择时段下标
const currentTimeIndex = ref('')

//点击获取日期的方法
const selectDate = (i: number, date: string) => {
    console.log(i)
    currentDateIndex.value = i;
    console.log(date)
    submitData.padding.date = date;
}

//选中具体预约时间段
const selectTime = (options: selectTimeType) => {
    console.log('options:', options)
    currentTimeIndex.value = options.key;
    submitData.padding.when = options.when;
    submitData.padding.period = options.period;
    submitData.padding.reserve_time = options.reserve_time
}

//提交预约
const submitBtn = async () => {
    //将数据提交到后台
    await submitXinGuanYuYueApi(submitData.padding)
    //如果成功提交，则跳转到新冠预约订单页面
    // uni.navigateTo({
    //     url: '订单路径'
    // })
}


</script>

<style lang="scss">
@import "@/assets/style/public.scss";

page {
    background: #f7f7f7;
}

.xinguan_form {
    background: #fff;
}



// 医院信息样式
.hospital_info {
    view {
        margin-top: 20rpx;
    }

    .yimiao_company {
        text {
            padding: 6rpx 18rpx;
            background: #eee;

        }
    }
}



.hospital_date {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    .hospital_date_item {
        background: #eee;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 6rpx 0;
        border-radius: 8rpx;

        view {
            margin-top: 10rpx;
        }
    }
}

// 预约时段
.yuyue_shiduan_time {
    display: flex;


    .yuyue_shiduan_time_item {
        padding: 20rpx;
        margin-left: 20rpx;
        background: #eee;
        border-radius: 10rpx;
        text-align: center;
    }
}


.active {
    background: #4676e2 !important;
    color: #fff !important;
}
</style>